<template>
	<!-- 个人信息注册 -->
	<view class="safe-nav-top">
		<u-navbar
			title="个人信息注册" 
			fixed
			autoBack 
		>
		</u-navbar>
		
		<div class="page-content">
			<div class="white-box" style="text-indent: 2em;">
				注册健康码，做好疫情防控工作。疫情很快就过去！
			</div>
			
			<!-- 表单区域 -->
			<div class="form-box white-box">
				<u-form style="padding-left: 24rpx;" :model="form" ref="form" label-width="100" labelAlign="left">
					<u-form-item label="姓名" prop="userName"  required>
						<u-input v-model="form.userName" clearable placeholder="请输入您的姓名" border="none"></u-input>
					</u-form-item>
					<u-form-item label="手机号" prop="phone" required>
						<u-input v-model="form.phone" clearable placeholder="请输入手机号" border="none"></u-input>
						<u-button slot="right" type="primary">获取验证码</u-button>
					</u-form-item>
					<u-form-item label="验证码" prop="code" required>
						<u-input v-model="form.code" clearable placeholder="请输入验证码" border="none"></u-input>
					</u-form-item>
					<u-form-item label="证件号码" prop="idCard" >
						<u-input v-model="form.idCard" clearable placeholder="请输入证件号码" border="none"></u-input>
					</u-form-item>
				</u-form>
			</div>
			
			<div class="white-box" style="padding: 36rpx 24rpx;"> 
				 <u-checkbox-group @change="onChangeAgreed"> 
				 	<u-checkbox checked :name="true" label="同意以上信息，同意区域管控。"></u-checkbox>
				 </u-checkbox-group>
			</div>
			
			<!-- 提交按钮 -->
			<u-button
				type="primary" size="large" @click="onSubmit" :disabled="!agreed"
				:loading="submitLoading" loadingText="正在提交..."
			>
				确定
			</u-button>
		</div>
		
		<!-- 底部信息 -->
		<PageFooter />
		
	</view>
</template>

<script>
	import PageFooter from '@/components/layout/PageFooter.vue';
	import { mapMutations } from 'vuex';
	
	export default {
		components: {
			PageFooter,
		},
		data() {
			return {
				form: {
					userName: null,
					phone: null,
					code: '1234',
					idCard: null
				},
				// 表单校验
				rules: {
					userName: [
						{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }
					],
					phone: [
						{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
						{ message: '请输入正确的手机号', pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: ['blur', 'change'] },
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }
					],
				},
				// 同意协议
				agreed: true,
				submitLoading: false,
			}
		},
		watch: {
			agreed(val){
				console.log('watch agreed', val);
			},
		},
		onLoad() {
			
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			...mapMutations('user', {
				setUserInfo: 'setUserInfo',
				setTokenInfo: 'setTokenInfo',
			}),
			// 同意按钮选项变化
			onChangeAgreed(value){
				this.agreed = value && value.length > 0 ? value[0] : false;
			},
			//点击确定提交
			onSubmit(){
				if (this.agreed !== true) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return;
				}
				this.$refs.form.validate().then(res => {
					//校验通过
					// 1. loading效果
					this.submitLoading = true;
					// 2. 请求个人注册接口
					let form = this.form;
					return this.$api.user.register(form);
				}).then(res=>{
					console.log("请求个人注册接口成功返回：", res);
					this.submitLoading = false;
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					});
					
					// 保存个人信息，token信息至缓存
					let data = res.data;
					let userInfo = data.userInfo;
					let tokenInfo = data.tokenInfo;
					this.setUserInfo(userInfo);
					this.setTokenInfo(tokenInfo);
					
					// 跳转至健康码首页
					uni.redirectTo({
						url: '/pages/healthCode/healthCode'
					});
				}).catch(e=>{
					console.log("请求个人注册接口，业务错误：", e);
					this.submitLoading = false;
					
				});
			},
		}
	}
</script>

<style scoped>
	
	/* 白色背景 */
	.white-box{
		background-color: #FFFFFF;
		border-radius: 6rpx;
		padding: 24rpx;
		color: #666666;
		margin-bottom: 24rpx;
	}
</style>
